<template>
  <div class="flex bj">
    <!-- 每一个订单 -->
    <div v-for="(item, index) in arr" :key="index" class="flex meiyikuai">
      <!-- 每个订单的每个商品 -->
      <dir
        v-for="(item2, index2) in item.items"
        :key="index2"
        class="flex meigeshangping"
      >
        <!-- 商品名称 -->
        <div class="zuo">{{ item2.snapTitle }}</div>
        <div class="you">
          <!-- 价格 -->
          <span>$ {{ item2.snapPrice }}</span>
          <!-- 个数 -->
          <span>x{{ item2.count }}</span>
        </div>
      </dir>
      <!-- 状态 -->
      <div class="flex xia">
        <div>{{ zhuangtai(item.status) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "QuanBu",
  data() {
    return {
      arr: [],
    };
  },
  methods: {
    zhuangtai(statys) {
      // 数据库 statys：0 待支付  1 待发货  2 待收货  4 取消
      let a = "";
      switch (statys) {
        case 0:
          a = "待支付";
          break;
        case 1:
          a = "待发货";
          break;
        case 2:
          a = "待收货";
          break;
        case 3:
          a = "已取消";
          break;
        default:
          a = "statys有问题";
          break;
      }
      return a;
    },
  },
  mounted() {
    this.$http.get("http://localhost:8080/order/statusAll").then((res) => {
      console.log(res.data);
      this.arr = res.data;
    });
  },
  props:['index']
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.bj {
  display: flex;
  background-color: rgba(228, 228, 228, 0.788);
  flex-direction: column;
  align-items: center;
}
.meiyikuai {
  display: flex;
  width: 90%;
  background-color: rgb(255, 255, 255);
  margin: 10px 0;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 2px 2px 3px rgba(129, 129, 129, 0.774);
  font-size: 18px;
}
.meigeshangping {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  /* background-color: rgb(165, 165, 165); */
  margin: 10px;
  height: 90%;
}
.xia {
  display: flex;
  flex-direction: row-reverse;
  /* background-color: rgb(229, 255, 133); */
  width: calc(100% - 40px);
  margin: 20px;
}
.zuo {
  display: flex;
  min-width: 40%;
  justify-content: flex-start;
}
.you {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  justify-content: space-between;
}
.you > span {
  margin: 10px;
}
</style>